<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button type="primary" @click="onAdd" icon="el-icon-plus">添加</el-button>
    </div>
    <el-table
      :data="list"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      lazy
      default-expand-all
      :tree-props="{children: 'child', hasChildren: 'hasChildren'}">
      <el-table-column
        prop="id"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="title"
        label="栏目名">
      </el-table-column>
      <el-table-column
        prop="icon"
        label="栏目图标">
        <template slot-scope="scope">
          <i class="iconfont" :class='scope.row.icon'></i>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="父栏目" prop="fid">
          <el-select v-model="ruleForm.fid" placeholder="请选择父栏目">
            <el-option
              v-for='item in columns'
              :key='item.id'
              :label="item.title"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="栏目名称" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
        <el-form-item label="栏目图标" prop="icon">
          <el-select v-model="ruleForm.icon" placeholder="请选择栏目图标">
            <el-option
              :label="item.title"
              :value="item.icon"
              v-for='item in icons'
              :key='item.icon'
            >
            <span style="float: left">{{ item.title }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px" class="iconfont" :class='item.icon'></span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { list, save } from '@/api/column'
import Pagination from '@/components/Pagination'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      columns: [],
      icons: [
        { 'title': '工作招聘', 'icon': 'icon-gongzuo' },
        { 'title': '房屋信息', 'icon': 'icon-zufang' },
        { 'title': '汽车服务', 'icon': 'icon-qiche' },
        { 'title': '教育培训', 'icon': 'icon-jiaoyu' },
        { 'title': '家居建材', 'icon': 'icon-jiajubaoyang' },
        { 'title': '生活服务', 'icon': 'icon-shenghuo-xuanzhong' },
        { 'title': '丽人服务', 'icon': 'icon-meinv' },
        { 'title': '美食购物', 'icon': 'icon-ziyuanleixing-meishi' },
        { 'title': '旅游出行', 'icon': 'icon-hanglixiang' },
        { 'title': '物流商务', 'icon': 'icon-wuliu' }
      ],
      ruleForm: {
        fid: 0,
        title: '',
        icon: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入栏目名称', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      tableKey: 0,
      list: [],
      total: 0,
      listLoading: false,
      listQuery: {
        page: 1,
        limit: 10,
        sort: '-create_time',
        where: []
      },
      statusList: [{
        id: 0,
        name: '正常'
      }, {
        id: 1,
        name: '禁用'
      }]
    }
  },
  created() {
    this.getList()
    // this.getUsers()
  },
  methods: {
    getList() {
      this.listLoading = true
      list({ 'tree': 1 }).then(response => {
        this.listLoading = false
        if (response.status) {
          this.list = response.data
        }
      })
    },
    // 添加column
    async onAdd() {
      try {
        this.dialogVisible = true
        const res = await list({ 'tree': 1 })
        this.columns = [{ 'id': 0, 'title': '顶级栏目' }, ...res.data]
      } catch (error) {
        console.log(error)
      }
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$store.commit('SHOW_LOADING')
          save(this.ruleForm)
            .then(res => {
              this.dialogVisible = false
              this.getList()
              this.$store.commit('HIDE_LOADING')
              this.resetForm()
            })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.$refs.ruleForm.resetFields()
    },
    searchData(data) {
      console.log(data)
      this.listQuery.page = 1
      this.listQuery.where = []
      if (data.keywords) {
        this.listQuery.where.push({
          field: 'title',
          op: 'like',
          value: data.keywords
        })
      }
      if (data.selected) {
        this.listQuery.where.push({
          field: 'status',
          op: 'aeq',
          value: data.selected
        })
      }
      if (data.dateStart) {
        this.listQuery.where.push({
          field: 'create_time',
          op: 'between',
          value: [data.dateStart, data.dateEnd]
        })
      }
      this.getList()
    }
  }
}
</script>
